<!doctype html>
<html lang="zh-CN">
<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" type="text/css"
          href="../assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="../assets/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="./admin/css/admin.css">
    <title>登录</title>
    <style>
        @keyframes am-bg {
            0%{
                background-position: 0 0,0 0,0 0;
            }

            100%{
                background-position: -96px 0,0px 0,0 0;
            }
        }
    </style>
</head>
<body style="width: 100vw; height: 100vh;
background-image:  repeating-linear-gradient(60deg,rgba(255,255,255,.5) 0,#FFFFFF 3px,rgba(255,255,255,.5) 4px,rgba(0,0,0,0) 96px), repeating-linear-gradient(-60deg,rgba(255,255,255,.5) 0,#FFFFFF 3px,rgba(255,255,255,.5) 4px,rgba(0,0,0,0) 96px),linear-gradient(to top,var(--blue),#FFF);
background-size: 200vw 200vh,200vw 200vh,100vw 100vh;
animation: am-bg 5s infinite ease-in-out alternate;
">

<div style="position: absolute; top:30%; left:calc(50vw - 14rem); width: 28rem;" class="card text-white bg-info mb-3">
    <div class="card-header"><h3><i class="fa fa-user"></i> 用户登录</h3></div>
    <div class="card-body">
        <form>
            <div class="form-group row">
                <label class="col-sm-3 col-form-label text-right">用户名</label>
                <div class="col-sm-9">
                    <input name="name" required type="text" class="form-control" value="">
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-3 col-form-label text-right">密码</label>
                <div class="col-sm-9">
                    <input name="pwd" required type="password" class="form-control" value="">
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-9 offset-sm-3">
                    <button class="btn btn-danger btn-lg">登录</button> <a class="btn btn-link  btn-lg" href="#">注册</a>
                </div>
            </div>

        </form>
    </div>
</div>

<!-- 选项 1：jQuery 和 Bootstrap 集成包（集成了 Popper） -->
<script src="../assets/js/jquery-3.6.0.min.js"></script>
<script src="../assets/js/bootstrap.bundle.min.js"></script>
<script src="login.js"></script>
</body>
</html>